<template>
    <div style="margin-top:20px;">
        <div class="form" v-for="(item, index) in tableData" :key="index">
            <el-form ref="residualValueForm" label-width="80px" :model="item">
                <el-row :gutter="24">
                    <el-col :span="5">
                        <el-form-item label="项目名称" prop="xmmc">
                            <el-input v-model="item.xmmc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="数量" prop="count">
                            <el-input v-model="item.count"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="编号" prop="bh">
                            <el-input v-model="item.bh"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="item.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label-width="0">
                            <el-button type="danger" @click="del(index)" class="delBtn">删除</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="but">
            <el-button v-if="!power" type="primary" @click="add()">添加</el-button>
            <el-button v-if="!power" type="primary" @click="submit()">保存
            </el-button>
            <el-button v-if="power" type="primary" @click="next()">下一页
            </el-button>
        </div>
    </div>
</template>

<script>
import { saveCzqd, selectById } from '@/api/evaluation/newBusiness'
export default {

    components: {

    },
    props: {
        power: {
            type: Boolean
        },
        ywid: {
            type: Number
        }
    },
    data () {
        return {
            tableData: [],
        }
    },
    methods: {
        add () {
            this.tableData.push({
                xmmc: '',
                count: '',
                bh: '',
                remark: ''
            });
        },
        del (index) {
            this.tableData.splice(index, 1);
        },
        submit () {
            var obj = {}
            obj.ywid = this.ywid
            obj.czqd = this.tableData
            saveCzqd(obj).then((res) => {
                this.$message.success('保存成功！')
                this.$emit('nextTab');
            })
        },
        next () {
            this.$emit('nextTab');
        },
        gettest () {
            selectById('id=' + this.ywid).then((res) => {
                this.tableData = res.data.czqd
                if (this.tableData) {
                    this.tableData = [{xmmc: '',count: '',bh: '',remark: ''}]
                }
            })
        }
    },
    // mounted () {
    //     this.gettest()
    // },
    activated () {
        this.gettest()
    }
}
</script>

<style scoped lang="less">
.but {
    text-align: right;
    background-color: #fff;
    margin-left: 10px;
    padding-right: 40px;
}

.el-form {
    margin-left: 10px;
    padding-left: 10px;
    background-color: #fff;
    // border-top-left-radius: 5px;
}

.delBtn {
    padding: 6px 10px;
}
</style>